<template>
  <div class="singlePie">
    <div class="filledSinglePie" :id=id style="height: 200px;width:400px;"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, computed } from 'vue';

const props = defineProps({
  data: Object
})
const id = props.data.id;
const data = props.data.data;
const theColorList = props.data.theColorList;

let dataHandled = computed(() => {
  let dataArr = [];
  for (let j = 0; j <= data.length - 1; j++) {
    let result = [], counter = 0;
    let theData = data[j].value.toString();
    let num = theData;
    for (let i = num.length - 1; i >= 0; i--) {
      counter++;
      result.unshift(num[i]);
      if (!(counter % 3) && i != 0) { result.unshift(','); }
    }
    let theValue = result.join('');
    dataArr.push(theValue);
  }
  return dataArr
})

onMounted(() => {
  getThePie()
})
const getThePie = () => {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;
  option = {

    color: theColorList,
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        clockwise: false,
        center: ['50%', '55%'],
        type: 'pie',
        padAngle: 2,
        radius: ['55%', '65%'],
        label: {
          lineHeight: 20,
          show: true,
          position: 'outer',
          fontSize: 14,
          alignTo: 'none',
          padding: [0, -100],
          color: '#ffffff',
          formatter: (params) => {
            return `{font|${params.name}}\n{num|${dataHandled.value[params.dataIndex]} ${params.percent.toFixed(1)}%}`
          },
          rich: {
            font: {
              color: '#ffffffc0',
              fontSize: 14,
              lineHeight: 20,
              fontFamily: "PingFang-Medium",
            },
            num: {
              fontSize: 14,
              lineHeight: 20,
              fontFamily: "PingFang-Bold",
              fontWeight: 'bold'
            }
          }
        },
        labelLayout: {
          verticalAlign: "bottom",
        },
        labelLine: {
          show: true,
          length: 20,
          length2: 120,
          lineStyle: {
            cap: 'round'
          }
        },
        emphasis: {
        },
        data: data
      },
    ]
  };
  option && myChart.setOption(option);
}
</script>
<style scoped>
.singlePie {
  display: flex;
  justify-content: center;
  align-items: center;
}

.filledSinglePie {
  background-image: url('@/assets/images/filledSinglePie.png');
  background-repeat: no-repeat;
  background-position: 50% 85%;
}
</style>